<template>
  <div class="pay-chart-container">
    <chart-select-bar
      @selectSucessBar="selectSucessBar"
      :SelectList="barSelectList"
      v-if="barSelectList.length"
      ref="bar"
      :position="barSelectObj.position"
    ></chart-select-bar>
    <chart-select-line
      ref="line"
      @selectSucessLine="selectSucessLine"
      :SelectList="lineSelectList"
       v-if="lineSelectList.length"
      :position="lineSelectObj.position"
    ></chart-select-line>
    <div :id="renderBindId" class="pay-chart" style="width:100%"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { isMobile } from '../utils/index'
import ChartSelectBar from './chart_select_bar.vue'
import ChartSelectLine from './chart_select_line.vue'
const ISMOBILE = isMobile()
export default {
  components: {
    ChartSelectBar,
    ChartSelectLine
  },
  name: 'PayChart',
  props: {
    title: {
      type: String,
      default: () => {
        return ''
      }
    },
    renderBindId: {
      type: String,
      default: () => {
        return ''
      }
    },
    barSelectList: {
      type: Array,
      default: () => {
        return []
      }
    },

    lineSelectList: {
      type: Array,
      default: () => {
        return []
      }
    },
    chartOption: {
      type: Object,
      default: () => {
        return {}
      }
    },

    flag: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      isShow: false,
      isMobile: false,
      myChart: null,
      barSelectObj: {
        position: {
          left: '40px',
          top: '-50px'
        }
      },
      lineSelectObj: {
        position: {
          right: ISMOBILE ? '0px' : '100px',
          top: ISMOBILE ? 0 : '10px'
        }
      },
      payChartOption: {
        grid: {},
        series: []
      }
    }
  },
  mounted () {
    this.isMobile = isMobile()
    this.$EventBus.$on('rePainting', () => {
      this.readerChart()
      // this.myChart ? this.myChart.resize() : this.readerChart()
    })
  },
  methods: {
    /**
     * 图表右上角变化
     * */
    contrastsChange: function (id) {
      if (id === 0) {
        this.restAll()
        this.$refs.bar.reset()
        this.$refs.line.reset()
      } else if (id === 1) {
        // id === 1 收入对比
        // 收入对比，累计计划产值，累计实际产值，累计预测产值，预测项目收益，项目收益
        // key line 1、3、5、7、8
        this.$refs.bar.showBar([])
        this.$refs.line.showLine([1, 3, 5, 7, 8])
      } else if (id === 2) {
        // 支出对比:累计目标成本，累计实际成本，累计预测成本，预测项目收益，项目收益
        // key line 2、4、6、7、8
        this.$refs.bar.showBar([])
        this.$refs.line.showLine([2, 4, 6, 7, 8])
      } else if (id === 3) {
        // 月度收入对比:计划产值，实际产值，预测项目收益，项目收益
        this.$refs.bar.showBar([1, 2])
        this.$refs.line.showLine([7, 8])
        // key bar 1、2 line 7、8
      } else {
        // 月度支出对比:目标成本，实际成本，预测项目收益，项目收益
        // bar 3、4  line 7、8
        this.$refs.bar.showBar([3, 4])
        this.$refs.line.showLine([7, 8])
      }
    },

    restAll: function () {
      const barList = this.payChartOption.series.filter(
        item => item.type === 'bar'
      )

      for (let i = 0; i < barList.length; i++) {
        const obj = barList[i]
        obj.itemStyle.opacity = 1
        obj.id = obj.id.includes(0) ? obj.id.replace('0', 1) : obj.id
      }

      const lineList = this.payChartOption.series.filter(
        item => item.type !== 'bar'
      )

      for (let i = 0; i < lineList.length; i++) {
        const obj = lineList[i]
        obj.itemStyle.opacity = 1
        obj.lineStyle.opacity = 1
        obj.id = obj.id.includes(0) ? obj.id.replace('0', 1) : obj.id
      }
      this.readerChart()
    },

    /**
     * 控制柱状图显示与否 回调
     * */
    selectSucessBar (selectArr) {
      this.$emit('rePainting', selectArr)
    },

    /**
     * 控制折线图显示与否 回调
     * */
    selectSucessLine (selectArr) {
      const lineList = this.payChartOption.series.filter(
        item => item.type !== 'bar'
      )
      if (!selectArr.length) {
        for (let i = 0; i < lineList.length; i++) {
          const obj = lineList[i]
          obj.itemStyle.opacity = 0
          obj.lineStyle.opacity = 0
          obj.id = obj.id.includes(1) ? obj.id.replace('1', 0) : obj.id
        }
      } else {
        for (let i = 0; i < lineList.length; i++) {
          const obj = lineList[i]
          obj.itemStyle.opacity = 0
          obj.lineStyle.opacity = 0
          obj.id = obj.id.includes(1) ? obj.id.replace('1', 0) : obj.id
        }
        for (let i = 0; i < lineList.length; i++) {
          const obj = lineList[i]
          for (let j = 0; j < selectArr.length; j++) {
            const item = selectArr[j]
            if (obj.typeKey === item.typeKey) {
              obj.itemStyle.opacity = 1
              obj.lineStyle.opacity = 1
              obj.id = obj.id.includes(0) ? obj.id.replace('0', 1) : obj.id
              break
            }
          }
        }
      }
      this.readerChart()
    },
    /**
     * 渲染图标数据
     * */
    readerChart () {
      if (this.myChart) {
        this.myChart.dispose()
      }
      this.payChartOption = this.chartOption
      this.payChartOption.grid = this.payChartOption.grid ? this.payChartOption.grid : this.flag
        ? {
          left: this.isMobile ? 30 : 60,
          right: this.isMobile ? 40 : 60,
          bottom: 40,
          top: this.isMobile ? 30 : 40
        }
        : {
          left: this.isMobile ? 30 : 60,
          right: this.isMobile ? 40 : 60,
          bottom: 38,
          top: this.isMobile ? 30 : 40
        }
      const obj = Object.assign({ chartOf: 1 }, this.payChartOption)
      if (document.getElementById(this.renderBindId)) {
        this.myChart = echarts.init(document.getElementById(this.renderBindId))
        this.myChart.setOption(obj)
      }
    }
  },
  destroyed () {
    this.myChart = null
  }
}
</script>

<style lang="scss" scoped>
.pay-chart-container {
  height: 100%;
  width: 100%;
  position: relative;
  .pay-chart {
    height: calc(100% - 40px);
    width: 100%;
  }
}
</style>
